<template>
  <div>
    <button @click="addItem">添加项目</button>
  <button @click="removeItem">删除最后一项</button>
  
  <transition-group name="list" tag="ul">
   <li v-for="item in items" :key="item.id" 
    :class="{'new-item': item.isNew, 'removed-item': item.isRemoved}">
      {{ item.text }}
    </li>
  </transition-group>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue';

const items = ref([
  { id: 1, text: '项目1', isNew: false, isRemoved: false },
  { id: 2, text: '项目2', isNew: false, isRemoved: false }
]);

const addItem = async () => {
  // 先添加元素（无新增状态）
  const newItem = {
    id: Date.now(),
    text: `项目${items.value.length + 1}`,
    isNew: false, // 初始不添加新增状态
    isRemoved: false
  };
  items.value.push(newItem);
  
  // 等待DOM更新后，再添加新增状态（避免样式冲突）
  await nextTick();
  newItem.isNew = true;
  
  // 1秒后移除新增状态
  setTimeout(() => {
    newItem.isNew = false;
  }, 1000);
};

const removeItem = () => {
  if (items.value.length === 0) return;
  
  const lastItem = items.value[items.value.length - 1];
  lastItem.isRemoved = true; // 标记删除状态（添加红色背景）
  
  // 1秒后执行真正的删除（等待离开动画完成）
  setTimeout(() => {
    items.value = items.value.filter(item => !item.isRemoved);
  }, 1000);
};
</script>

<style>
/* 列表过渡动画 */
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}

/* 进入动画：从右侧30px处淡入 */
.list-enter-from {
  opacity: 0;
  transform: translateX(30px);
}
/* 进入动画结束后（默认状态） */
.list-enter-to {
  opacity: 1;
  transform: translateX(0);
}

/* 离开动画：向左侧30px处淡出 */
.list-leave-from {
  opacity: 1;
  transform: translateX(0);
}
.list-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* 状态样式：新增时绿色背景，删除时红色背景 */
.new-item {
  background-color: #d4edda;
}
.removed-item {
  background-color: #f8d7da;
}

/* 基础样式（可选，优化显示） */
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  margin: 4px 0;
  border: 1px solid #eee;
}
</style>